En noviembre llegó la primera y en febrero la segunda.
Son mis princesas, o mejor dicho ¡Mis reinas! son mis nietas.
El nacimiento de la menor es el motivo de ausencia estos días, pido disculpas a todos los que mandaron algún email o dejaron comentarios sin obtener respuesta.
En breve estoy de regreso con muchas ganas y una sorpresa que os va a gustar.
Son mis princesas, o mejor dicho ¡Mis reinas! son mis nietas.
El nacimiento de la menor es el motivo de ausencia estos días, pido disculpas a todos los que mandaron algún email o dejaron comentarios sin obtener respuesta.
En breve estoy de regreso con muchas ganas y una sorpresa que os va a gustar.
Wallpapers LOVE |
|
| ▼ |
Imagen que aparece con efecto deslizante |
|
| ▼ |
En Dinamic Drive nos muestran una animación de fotogramas con CSS3.
El efecto muestra el deslizamiento de una imagen que permanece oculta y se sitúa sobre la imagen que visualizamos. En IE8 y IE9 también funciona, aunque no queda tan conseguido el efecto deslizante.
Como son efectos que la mayoría de veces los añadimos esporadicamente lo que haremos para probarlo es incluir todo el código necesario justo donde deseamos mostrar el efecto, ya sea una entrada o un gadget de HTML.
Primero añadimos el código para las imágenes, y ahí mismo especificamos el tamaño de la primera imagen.
(No es necesario añadir los dos ejemplos, son como referencia para añadir el tamaño de la que será la primera imagen)
A continuación de las imágenes copiamos y pegamos los estilos:
<style>
.pulloutimage{
position: relative;
}
.pulloutimage img{
position: absolute; /* absolute position and stack images inside container */
left: 0;
/* aquí estilos para el borde de la primera imagen */
}
.pulloutimage img.ondemand{ /*CSS for image shown on demand */
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}
.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}
@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
0%{ /* Start of animation */
z-index: -1;
opacity: 0;
}
50%{ /* Half way point, move image to right edge of container */
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{ /* 51% point, stack animating image on top of original image */
z-index: 2;
}
100%{ /* Final point, move animating image back so it's on top of original */
left: 0;
box-shadow: 8px 8px 15px gray;
}
}
@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
-webkit-animation-name:revealfromright; /* specify animation keyframe */
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;/* esto es la sombra */
z-index:2;
/* aquí estilos para el borde de la segunda imagen */
}
.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
opacity:0.5;
}
</style>
- En los estilos está marcado el lugar que podemos modificar si deseamos añadir algún tipo de borde a las imágenes.
- La sombra que muestra la segunda imagen la podemos quitar eliminando la línea con la propiedad box-shadow.
Biografía en Facebook |
|
| ▼ |
En Facebook Pilar me comentaba sobre la nueva imagen de mi perfil.
Se trata de la Biografía o Timeline un nuevo diseño que como su nombre indica es parecido a una biografía o "nuestra historia" compartida por medio de las cosas que vamos contando ya sea en fotografías, vídeos o escritas.
Se trata de la Biografía o Timeline un nuevo diseño que como su nombre indica es parecido a una biografía o "nuestra historia" compartida por medio de las cosas que vamos contando ya sea en fotografías, vídeos o escritas.

Imagen de biografía obtenida en Google
Prueba de 7 días
En el siguiente enlace encontraremos información muy interesante pero aún así hay tener algo muy claro y es que NO hay retroceso y por lo tanto una vez pasado ese tiempo de 7 días no se puede volver al antiguo perfil.Durante ese tiempo de prueba podemos curiosear y probar todo y solo lo veremos nosotros.
A los que no les guste o simplemente prefieren quedarse con su perfil de siempre decirles que Facebook prevee que en las próximas semanas todos los perfiles sean sustituidos por el nuevo diseño de "Timeline" o "Biografía".
Si no quieres esperar puedes actualizar a biografía aquí haciendo click en "Consíguelo ahora" o esperar a que salga el anuncio en tu perfil.
Personalmente me gusta el cambio, no lo veo tan frío como el anterior diseño y recuerda mucho la actividad de un blog.
Teddy |
|
| ▼ |
Consejos los justos |
|
| ▼ |
Yo no sé vosotros pero en repetidas ocasiones por no decir muchísimas llego a artículos que hablan sobre largas listas de consejos para ser un buen blogger o conseguir un blog con cierta notoriedad y fíjense que no digo éxito porque es una palabra tan fugaz como confusa.
Y no hablemos de las listas de consejos para ganar dinero que esas si que no tienen desperdicio porque si saben la forma de ganar dinero ¿por qué siguen perdiendo el tiempo escribiendo las mismas tonterías que no se creen ni ellos?
Y no hablemos de las listas de consejos para ganar dinero que esas si que no tienen desperdicio porque si saben la forma de ganar dinero ¿por qué siguen perdiendo el tiempo escribiendo las mismas tonterías que no se creen ni ellos?
Se pueden seguir ciertas indicaciones para que nuestro sitio esté bien indexado, registrarse en directorios de confianza, tener cierta actividad en las redes sociales y lo más importante que nuestro blog se actualice con frecuencia. Con esas pautas es muy probable que recibamos visitas. Es una forma elegante de darnos a conocer pero eso no garantiza nada, simplemente hará que nuestra actividad en la red será más visible.
Mi ahijado Pizcos dice que hay demasiados blogs que carecen de interés, sitios que se utilizan como el que tiene una libreta de apuntes que a la larga queda en el olvido y digo yo ¿tan malo es eso? ¿sería conveniente que todos esos blogs sin actividad desaparecieran?.
Pienso, que no hay que olvidar que toda la información es contenido compartido pero no deja de ser por ello información.
Con esos argumentos se viene abajo mi creencia que un blog es un sitio para usar a nuestro antojo o mejor dicho para nuestro "uso y disfrute".
"Si necesitas expresarte, alcanzar notoriedad, quieres ganar dinero, ect, usa las redes sociales y no abras un blog" (Pizcos)
Ahora ya sé por qué no soy millonaria, porque desde hace seis años este blog trata sobre la misma temática y tiene la misma dinámica de siempre. Algunos post ni siquiera son una traducción de otros sitios sino la forma de conseguir adaptar algo a nuestro blog explicado ni mejor ni peor simplemente a mi manera.
Es contenido que veo por aquí y por allá que van sumando archivos.Es lo que me gusta, independientemente que sea contenido fresco o no y probablemente quede en una libreta de apuntes. Pero es mi blog
Decorando con franjas de color |
|
| ▼ |

Esa franja de colores en la parte superior del blog que se ve en algunos diseños con tendencia Web 2.0 la podemos crear con algún editor de imágenes, pero hay otra forma muy sencilla de conseguirla porque Dynamic Drive ofrece un generador (Ribbon Rules Generator ) que dicho sea de paso tiene ya un buen tiempo funcionando.
Hay dos opciones de generar la imagen, puede ser de forma aleatoria o colores escogidos por nosotros.

(Esto es una imagen, el generador en la página del autor)
Una vez obtenemos la imagen la añadimos en body (plantilla edición de HTML) de la siguiente forma:
body {
background:#000 url(url-imagen) top left repeat-x;padding-top: 10px;
------
------
------
}
background:#000 url(url-imagen) top left repeat-x;padding-top: 10px;
------
------
------
}
(Todo el fondo de body que no es cubierto por la imagen quedará del color que añadimos anterior a la imagen, en este ejemplo #000 que es negro)
Si la parte central de la imagen queda oculta podemos dejar más espacio entre el blog y la imagen para que sea más visible en:
#outer-wrapper {margin:30px 0 0 40px;
------
------
------
}
Las nuevas plantillas añaden Reply (sistema de respuesta en comentarios) |
|
| ▼ |
Si hay una palabra indicada esa sería "práctico" y si fueran dos, añadiría también lo de "funcional". Así es como definiría la nueva mejora de Blogger para las nuevas plantillas.
Se trata de la implementación del sistema de respuesta en los comentarios conocido por todos como Reply y que ahora, ya no se tiene que añadir manualmente como hicimos hace unos meses.

Así me lo hizo saber Jorge Angel y así lo he comprobado que la opción Reply se puede usar en "Responder" y eliminar el comentario con el enlace "Suprimir".

El sistema es muy cómodo cuando se trata de respuestas individuales.
Aunque no soy fans de las nuevas plantillas es bueno que tengas mejoras y que sigan así.
Compartir entradas de Blogger en Google+ |
|
| ▼ |
De todas las novedades de Blogger la última es la que peor he digerido y no es por capricho sino porque no termina de convencerme el cambio igual luego una se va acostumbrando como suele pasar con casi todo.
Con el cambio me refiero a ese cambio de perfil de Blogger a Google+ pero más concretamente
Cuando Google+ cordialmente nos invitó a algunos a no utilizar el nombre de autor en Blogger y nos sugirió usar el nombre propio, entonces no pensaba yo que tendría relación a la hora de cambiar de un perfil a otro.
No sé si estaba escrito en alguna parte y yo no lo leí o lo leí sin llegar a entenderlo, o ni lo uno ni lo otro sino que no lo explicaron en ninguna parte que con el tiempo cualquier usuario que quisiera publicar sus entradas en Google+ tendría que olvidarse de su nombre de autor de toda la vida.
Que quieren que les diga, una tiene su corazoncito y hay cosas de las que cuesta desprenderse.
Que quieren que les diga, una tiene su corazoncito y hay cosas de las que cuesta desprenderse.
Igual no me explico y simplemente pienso en voz alta pero lo cierto es que por enésima vez he cambiando el perfil y seguramente lo seguiré cambiando, mientras tanto ahí van los pasos a seguir por si le sirven a alguien.
A tener en cuenta
A tener en cuenta
Desde el momento que se conecta el blog a Google+ el nombre que dimos en Google+ será el que sustituya nuestro añorado nombre en Blogger y cuando digo Blogger digo comentarios y perfil del blog y en el formulario de comentarios claro está.


Hacemos de tripas corazón pensando que si los de Blogger dicen que el cambio es bueno por algo será que ellos entienden un rato.
Conectar nuestro blog con Google+
Para compartir las entradas de Blogger en Google+ necesitamos tener un perfil público y luego ya podemos hacer el cambio.
Primero hay que "conectar el blog a Google+" podemos hacerlo desde el siguiente enlace o con unos sencillos pasos que veremos a continuación.
Primero hay que "conectar el blog a Google+" podemos hacerlo desde el siguiente enlace o con unos sencillos pasos que veremos a continuación.
- Nos situamos en escritorio y hacemos click sobre el blog que vamos a conectar con Google+
- En la esquina superior derecha veremos nuestra imagen en Blogger con la flecha del desplegable que nos lleva al perfil y la configuración de la cuenta. Justo después en el icono de la rueda dentada veremos otro desplegable y ahí en "Conectar a Google+" hacemos click con fuerza y decisión.

Otra forma de conectar el blog a Google+ es desde Escritorio/Configuración:

Inmediatamente nos muestra el antes y después de nuestro perfil, es decir, que si en Blogger yo soy Gem@ en Google+ aparece mi nombre y apellido, o supuestamente el que uno diga que es su nombre. Un poco después nos informan del funcionamiento y da unas pautas:
"Cuando hagas el cambio al perfil de Google+, tendrás 30 días para restablecer tu perfil de Blogger si quieres. Una vez finalizado este plazo, se eliminarán los datos que incluya.
La información de tu perfil de Blogger no se transferirá a tu perfil de Google+. Por tanto, debes copiar la información de tu perfil de Blogger a tu perfil de Google+ antes de hacer el cambio."
"He leído la información indicada anteriormente y comprendo perfectamente que, a partir de este momento, mi perfil público de Google+ se asociará a todos mis blogs. Estoy listo para cambiar al perfil de Google+ en Blogger."+
- Si estamos conformes aceptamos marcando en la casilla correspondiente y aparecerá un botón naranja para cambiar.
- La página que nos muestra a continuación es para confirmar que somos nosotros, accedemos con nuestra cuenta y contraseña y nos mostrará un listado con todos los blogs que tengamos hasta ese momento.
- Marcaremos las casillas de los blogs que deseamos mostrar en nuestro perfil de Google+ y con eso termina el proceso de cambio.
Ver más información detallada.
Compartir las entradas en Google+
Cada vez que escribimos una entrada y le damos salida veremos que en la parte de abajo de esa entrada tenemos la opción de "Compartir" marcamos la casilla, hacemos click en Compartir y listo, nuestra entrada estará en muestro perfil de Google+.


Noche de ilusiones |
|
| ▼ |
Slideshow para fondo del blog CSS3 |
|
| ▼ |
Con la entrada del nuevo año algunos aún están reponiendo las energías consumidas por los excesos y otros ya están pensando en cambiar el diseño del blog sin tener las ideas demasiado claras todavía.
En CODROPS si que tienen las ideas muy claras y nos presentan este fantástico tutorial para añadir un Slideshow de imágenes que ocupa todo el fondo de pantalla.
Como es costumbre ofrece varias opciones a escoger para las transiciones de imágenes y para mi ejemplo he tomado como referencia la demo nº2 que está funcionando en este blog de pruebas.

Si seguimos el tutorial ofrecido en CODROPS conseguiremos que funcione perfectamente pero el contenido del blog pasará desapercibido debido a la transparencia así que lo que haremos será añadir en outer-wrapper opacity:0.9 de esa forma la transparencia será menor y nos quedaría algo así:
#outer-wrapper {
background:#000;
width:800px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
opacity:0.9;
}
Ahora nos situamos justo antes de ]]></b:skin> y añadimos los estilos necesarios para la demo nº2 si deseáramos el efecto de otra demo podemos descargar de la página del autor un archivo comprimido con todos los ejemplos y lo necesario para ponerlos en práctica.
/* Fondo- slideshow
----------------------------------------------- */
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://1.bp.blogspot.com/-oIUwg-kYYww/TwHcFJNdpbI/AAAAAAAASUM/Xajrx6UuZ4A/s1600/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(http://2.bp.blogspot.com/-fOSyxMAloOw/TwHcBLK6DhI/AAAAAAAASUA/3z2xC1yzraI/s1600/6.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(http://2.bp.blogspot.com/-W3lBoii0PeA/TwHb8mwcqVI/AAAAAAAAST0/J1xoKKSSptE/s1600/5.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(http://1.bp.blogspot.com/-CONisBR6XsI/TwHb8DONorI/AAAAAAAASTo/xwwE-zAoB7o/s1600/4.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(http://2.bp.blogspot.com/-Kr3e9kyS6vI/TwHb7-hrgFI/AAAAAAAASTc/-d33scTTpcU/s1600/3.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(http://4.bp.blogspot.com/-f_4dgBuVYQQ/TwHb7WA_mFI/AAAAAAAASTQ/_GYK7TA_wEA/s1600/2.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(http://2.bp.blogspot.com/-DcPbXRerZiA/TwHb7cRpZDI/AAAAAAAASTE/iH5VFoIPbWE/s1600/1.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}En los estilos he añadido las imágenes proporcionadas en la descarga del autor, las localizamos en:
cb-slideshow li:nth-child(1 y posteriormente las terminadas en 2 - 3 - 4 - 5 - 6
También encontraremos en cb-slideshow:after la imagen pattern.png. Todas ellas las podemos sustituir por otras teniendo en cuenta que miden 1024x 683 excepto pattern.png.
Una vez añadimos los estilos nos situamos justo después de <body>; y añadimos el HTML
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>se·ren·i·ty</h3></div></li>
<li><span>Image 02</span><div><h3>com·po·sure</h3></div></li>
<li><span>Image 03</span><div><h3>e·qua·nim·i·ty</h3></div></li>
<li><span>Image 04</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 05</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 06</span><div><h3>re·lax·a·tion</h3></div></li>
</ul>Sustituimos las letras que van apareciendo en la demo por las de nuestra elección (sólo las letras)
Y por último recordar que las imágenes de este tutorial son de Mark Sebastian.
http://creativecommons.org/licenses/by-sa/2.0/deed.en
Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0
Feliz año nuevo a todos |
|
| ▼ |

Os abrazo, y con mi abrazo me gustaría transmitir mis deseos de PAZ y SALUD para todos.
Ojalá que este año que está a punto de comenzar inunde nuestros corazones de esperanza y nos haga fuertes para soportar todo lo que la vida nos va deparando.
Que no falte nunca el amor en vuestras vidas y ¡que no falte trabajo!
Ojalá que este año que está a punto de comenzar inunde nuestros corazones de esperanza y nos haga fuertes para soportar todo lo que la vida nos va deparando.
Que no falte nunca el amor en vuestras vidas y ¡que no falte trabajo!
!!Feliz Año a todos, que se cumplan todos vuestros sueños¡¡
Feliz Navidad 2011 |
|
| ▼ |
24
opiniones




































